<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <div slot="header" class="clearfix" s>
        <span style="font-weight: bold">基本信息</span>
      </div>
      <el-row style="margin-bottom: 20px; white-space: nowrap; font-size: 14px">
        <el-col :span="6">运输任务编号：{{ info.transportTaskId }}</el-col>
        <el-col :span="6">车牌号码：{{ info.licensePlate }}</el-col>
        <el-col :span="6">起始地机构：{{ info.startAgencyName }}</el-col>
        <el-col :span="6">目的地机构：{{ info.endAgencyName }}</el-col>
      </el-row>
      <el-row style="font-size: 14px">
        <el-col :span="6">出车时间：{{ info.outStorageTime }}</el-col>
        <el-col :span="6">回车时间：{{ info.intoStorageTime }}</el-col>
        <el-col :span="6">司机：{{ info.driverName }}</el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">异常信息</span>
      </div>
      <el-row style="font-size: 14px">
        <el-col :span="8"
          >车辆故障：{{ info.isFault === false ? "否" : "是" }}</el-col
        >
        <el-col :span="8"
          >车辆违章：{{ info.isBreakRules === false ? "否" : "是" }}</el-col
        >
        <el-col :span="8"
          >车辆事故：{{ info.isAccident === false ? "否" : "是" }}</el-col
        >
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getCarRegisterInfoApi } from "@/api/car-models";

export default {
  name: "carRegisterInfo",
  data() {
    return {
      info: {},
    };
  },
  created() {
    // console.log(this.$route);
    this.getCarRegisterInfo();
  },
  methods: {
    async getCarRegisterInfo() {
      const id = this.$route.params.id;
      const res = await getCarRegisterInfoApi(id);
      console.log(res);
      this.info = res.data;
      console.log(this.info);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  background: #f8faff;
}
</style>
